<template>
  <div class="main">
    <p class="title">申请提现</p>
    <div class="contbox">
      <p class="el1">可提现金额</p>
      <p class="num"><span>￥</span>{{ storeinfo.money }}</p>
      <p class="tip">累计提现金额：￥{{ storeinfo.amount }}</p>
    </div>
    <div class="nav">
      <el-radio-group v-model="radio" @change="changeType">
        <el-radio :label="2">选择银行卡</el-radio>
      </el-radio-group>
    </div>
    <div class="content">
      <div v-if="radio == 2">
        <!-- <div class="cardbox">
          <span class="label">选择银行卡</span>
          <div class="right">
            <div class="cards">
              <div class="cbox cact">
                <img src="../../assets/img/tu.png"
                     class="clogo">
                <span>中国招商银行</span>
                <span>尾号：1234</span>
              </div>
            </div>
            <p class="addtext"
               @click="addcardpop=true">+ 添加银行卡</p>
          </div>
        </div> -->
        <div class="inpbox">
          <span class="label">真实姓名</span>
          <div class="inp">
            <el-input
              v-model="name"
              placeholder="请输入您的真实姓名"
            ></el-input>
          </div>
        </div>
        <div class="inpbox">
          <span class="label">银行卡号</span>
          <div class="inp">
            <el-input v-model="card" placeholder="请输入银行卡号"></el-input>
          </div>
        </div>
        <div class="inpbox">
          <span class="label">开户行</span>
          <div class="inp">
            <el-input v-model="bank" placeholder="请输入开户行"></el-input>
          </div>
        </div>
        <div class="inpbox">
          <span class="label">提现金额</span>
          <div class="inp">
            <el-input v-model="money" placeholder="请输入金额"></el-input>
            <span class="danw">元</span>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="applySubmit">确认提现</el-button>
      </div>
    </div>
    <!-- <el-dialog title="添加银行卡"
               :visible.sync="addcardpop"
               width="40%">
      <el-form label-width="100px"
               :model="cardinfo">
        <el-form-item label="卡号">
          <el-input v-model="cardinfo.num"></el-input>
        </el-form-item>
        <el-form-item label="开户行">
          <el-input v-model="cardinfo.type"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="cardinfo.tell"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="cardinfo.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submit(cardinfo)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      storeinfo: {},
      radio: 2,
      name: "",
      money: "",
      card: "",
      bank: "",
      // addcardpop: false,
      // cardinfo: {
      //   num: "",
      //   type: "",
      //   tell: "",
      //   name: ""
      // }
    };
  },
  mounted() {
    this.getStoreInfo();
    this.getLastApply();
  },
  methods: {
    // 获取店铺信息
    getStoreInfo() {
      this.$getRequest(
        "/shop/shop/" + sessionStorage.getItem("shopId"),
        {}
      ).then((res) => {
        this.storeinfo = res.data.shopShop;
        console.log(this.storeinfo);
      });
    },
    // 获取最后一次提现信息
    getLastApply() {
      this.$postRequest("/mall/shopExtract/getByType", {
        shopId: sessionStorage.getItem("shopId"),
        type: this.radio,
      }).then((res) => {
        if (res.data) {
          this.name = res.data.name;
          this.money = res.data.money;
          this.card = res.data.card;
          this.bank = res.data.bank;
        } else {
          this.name = "";
          this.money = "";
          this.card = "";
          this.bank = "";
        }
      });
    },
    // 申请提现
    applySubmit() {
      if (this.money == "" || this.name == "" || this.card == "") {
        this.$message.error("内容不能有空");
      } else if (this.radio == 2) {
        var validateBankCard = /^([1-9]{1})(\d{14}|\d{18})$/;
        if (this.bank == "") {
          this.$message.error("内容不能有空");
        } else if (!validateBankCard.test(this.card)) {
          this.$message.error("银行卡号错误，请检查后重试");
        }
      } else {
        this.$postRequest("/mall/shopExtract/add", {
          shopId: sessionStorage.getItem("shopId"),
          money: this.money * 1,
          type: this.radio,
          name: this.name,
          card: this.card,
          bank: this.bank,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("申请成功");
          }
        });
      }
    },
    // 切换类型
    changeType() {
      this.getLastApply();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-radio {
  margin-right: 150px;
}
/deep/ .el-button--primary {
  background-color: #1a69e0;
  border-color: #1a69e0;
}
.main {
  margin: 20px;
  background: #fff;
  .title {
    font-size: 18px;
    line-height: 60px;
    padding: 0 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
  }
}
.contbox {
  margin: 0 40px;
  background: #f9f9f9;
  border: 1px solid #eeeeee;
  border-radius: 6px;
  padding: 30px 40px 20px 40px;
  .el1 {
    font-size: 16px;
    color: #808080;
  }
  .num {
    font-size: 32px;
    color: #d94511;
    font-weight: bold;
    margin: 25px 0;
    span {
      font-size: 24px;
    }
  }
  .tip {
    font-size: 16px;
    color: #808080;
  }
}
.nav {
  margin: 30px 40px 40px 40px;
}
.content {
  padding: 0 40px;
  .cardbox {
    display: flex;
    .label {
      font-size: 14px;
      width: 110px;
      line-height: 60px;
    }
    .right {
      .cards {
        .cbox {
          width: 600px;
          height: 50px;
          background: #f6f8fb;
          border: 1px solid #eee;
          display: flex;
          align-items: center;
          padding: 0 20px;
          cursor: pointer;
          margin-bottom: 10px;
          transition: 0.2s;
          .clogo {
            height: 30px;
            width: 30px;
            border-radius: 50%;
          }
          > span:nth-of-type(1) {
            font-size: 16px;
            padding: 0 40px 0 25px;
          }
          > span:nth-of-type(2) {
            font-size: 14px;
          }
        }
        .cact {
          border: 1px solid #1a69e0;
        }
        .cbox:hover {
          border: 1px solid #1a69e0;
        }
      }
      .addtext {
        // border: 1px solid red;
        font-size: 12px;
        color: #1a69e0;
        cursor: pointer;
        display: inline-block;
        line-height: 60px;
      }
    }
  }
  .inpbox {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .label {
      font-size: 14px;
      width: 110px;
    }
    .inp {
      display: flex;
      align-items: center;
      width: 300px;
      .danw {
        padding-left: 20px;
      }
    }
  }
  .btn {
    margin: 40px 0 0 110px;
    padding-bottom: 40px;
  }
}
</style>